<template>
  <div class="top">
    <div class="elm">
        <span class="name">饿了么</span>
        <span class="label">
            <div><van-icon name="ellipsis" /> </div>
            <div><van-icon name="close" /></div>
        </span>
    </div>
    <div class="search" @click="$router.push('/search')">
        <van-icon name="search" />
        <span>输入商家、商品名称</span>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.top{
   background-image: linear-gradient(to bottom left,rgb(3, 157, 228),rgb(130, 208, 239));
   width: 100%;
   height: 120px;
   overflow: hidden;
   .elm{
    width: 95%;
    margin: 0 2.5%;
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    .name {
            color: rgb(218, 230, 230);
        }
    .label{
        // width: 60px;
        // height: 15px;
        background-color: rgba($color: #414040, $alpha: .3);
        border-radius: 10px;
        display: flex;
        div{
            margin:4px 6px ;
            color: white;
        }
    }
    
   }
   .search{
    width: 95%;
    line-height: 32px;
    text-align: center;
    margin: 6px 2.5%;
    margin-top: 18px;
    background-color: whitesmoke;
    border-radius: 10px;
   }
}
</style>